<template>
  <ma-crud ref="crudRef" :columns="columns" :options="crud">
    <template #search-module="{ searchForm, component }">
      <a-input
        :style="{ width: '240px' }"
        v-model.trim="searchForm[component.dataIndex]"
        allow-clear
        placeholder="请输入模版名称"
      >
        <template #prefix>
          <icon-search />
        </template>
      </a-input>
    </template>
    <template #search-userName="{ searchForm, component }">
      <a-input
        :style="{ width: '240px' }"
        v-model.trim="searchForm[component.dataIndex]"
        allow-clear
        placeholder="请输入用户名称"
      >
        <template #prefix>
          <icon-search />
        </template>
      </a-input>
    </template>
  </ma-crud>
</template>

<script lang="ts" name="Audit" setup>
import { listTbAuditMessage } from "@/api/monitor/audit";

const crud = reactive({
  id: "id",
  pk: "id",
  title: "审计查询",
  api: listTbAuditMessage,
  showIndex: false,
  pageLayout: "normal",
  requestParams: { orderBy: "createTime", orderType: "desc" }
});

const columns = reactive([
  {
    title: "编号",
    dataIndex: "id",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "平台",
    dataIndex: "platform",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "模块名称",
    search: true,
    dataIndex: "module",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "用户名称",
    search: true,
    dataIndex: "userName",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "用户IP",
    dataIndex: "userName",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "执行SQL",
    dataIndex: "query",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "参数",
    dataIndex: "queryParams",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "执行时间",
    dataIndex: "queryTime",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "消耗时间",
    dataIndex: "elapsedTime",
    ellipsis: true,
    tooltip: true,
    align: "center"
  }
]);
</script>
